<template>
  <div>
    <div
      :style="{
        backgroundImage: `url(${require('~/assets/imgs/cart' +
          (cartNum == 0 ? '-empty' : '-full') +
          '.png')})`
      }"
      class="cart"
      @click="goto('../cart/cart')"
    >
      <div class="number" v-if="cartNum > 0">{{ cartNum }}</div>
    </div>
  </div>
</template>

<script>
import nav2 from './nav2.vue'
import search from './search.vue'
import language from './language.vue'

export default {
  components: {
    nav2,
    search,
    language
  },
  props: {
    cartNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      cartList: []
    }
  },
  mounted() {
    // this.getCartList();
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.cart {
  position: fixed;
  top: 700px;
  left: calc(50vw - 600px + 1200px + 20px);
  width: 78px;
  height: 78px;
  background-size: 100% 100%;

  .number {
    position: absolute;
    right: 20px;
    top: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    color: black;
    font-size: 12px;
    color: #ffffff;
  }
}
</style>
